<!--
 * @Author: CJF
 * @Email: 1757818940@qq.com
 * @Date: 2022-02-24 16:20:40
 * @LastEditTime: 2022-02-28 11:56:33
 * @Description: 
-->
<template>
  <div class="wrap">
    <div class="loginbox">
      <div class="logo"></div>
      <div class="inputbox">
        <input
          type="search"
          placeholder="请输入手机号"
          v-model="loginObj.phone"
        />
      </div>
      <div class="inputbox">
        <input type="text" placeholder="请输入用户名" v-model="loginObj.name" />
      </div>
      <van-checkbox v-model="isRember" checked-color="#ee0a24" class="isrem"
        ><p>同意App相关协议</p></van-checkbox
      >
      <van-button color="#ed3d30" class="loginBtn" block :loading='loading'  loading-text="注册中..." 
      :disabled='!/^1[3-9][0-9]{9}$/.test(this.loginObj.phone)||loginObj.name ==""||!isRember ' @click="loginEvt()">注册</van-button>
      <p  class="goreg" @click="goLogin()">已有账号？去登录</p>
      
    </div>
    <div class="copy">
      Copyright &copy; 1998-2022 ZhangSan.All Rights Reserved
    </div>
  </div>
</template>
<script>
import loginApi from '../../apis/loginApis'
export default {
  data() {
    return {
      loginObj: {
        phone: "",
        name: "",
      },
      isRember: false,
      loading:false
    };
  },
  methods: {
     async loginEvt(){
         if(this.loading) return
         this.loading = true
          let result = await loginApi.register(this.loginObj) 
          if(result.code!=200){
            this.$toast.fail(result.msg)
          }else{
             this.$toast.success(result.msg)
          }
        
           this.loading = false
      },
      goLogin(){
          this.$store.commit('welfareah/setLoginAdv',false)
          this.$router.push('/login')
      }
  },
}
  </script>
<style lang="less" scoped>
.wrap {
  display: flex;
  height: 100%;
  width: 100%;
  position: fixed;
  background: #ededed;
  padding: 16vh 10px 20px;
  box-sizing: border-box;
  flex-direction: column;
  .loginbox {
    flex: 1;
    .logo {
      width: 100px;
      height: 100px;
      margin: 0 auto;
      background: url(../../images/logo.png) no-repeat center center;
      background-size: 100% 100%;
      margin-bottom: 50px;
    }
    .inputbox {
      display: flex;
      height: 34px;
      border-radius: 20px;
      background-color: #fff;
      margin-top: 30px;
      padding: 2px 15px;
      font-size: 0.7rem;
      input {
        flex: 1;
        width: 0;
        height: 30px;
        border: none;
        background: transparent;
      }
      .getcode {
        font-size: 0.7rem;
        color: #4c4a4a;
        line-height: 30px;
        border-left: 1px solid #bfb3b3;
        padding-left: 10px;
      }
    }
    .isrem {
      font-size: 0.7rem;
      margin-top: 10px;
      margin-left: 10px;
      margin-bottom: 20px;

      p {
        color: #656a6a;
      }
    }
    .loginBtn {
      border-radius: 5px;
    }
    .goreg {
      margin-top: 20px;
      display: block;
      font-size: 0.6rem;
      text-align: center;
      color: #ed3d30;
      text-decoration: underline;
      &:active {
        color: #ed3d30;
      }
    }
  }
  .copy {
    width: 100%;
    color: #ccc;
    font-size: 0.5rem;
    text-align: center;
  }
}
</style>